<template>
    <div class="loading" v-show="loading">
      <div>
        <div class="position">
            <img src="http://file.zoomyoung.cn/web/img/loading.gif">
            <span class="load">加载中...</span>
        </div>
      </div>
    </div>
    </template>
   <script>
    export default {
      name: 'load',
      data() {
        return {
          loading: false
        }
      },
      created:function() {
        var that = this;
        this.bus.$on('loading', function (data) {
          that.loading = !!data;
        })
      }
    }
    </script>
    <style scoped>
  .loading{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    bottom:0;
    right: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.8);}
    .position{width: 53.3%;height: 15%;position: absolute;left: 50%;top: 36%;margin-left: -25.2%;background: black;}
    img {width: 26.5%;margin: 5px auto;display: block;}
    span{display: block;width: 100%;height: .4rem;color: #ff00d4;font-size: .4rem;text-align: center;color: white;}
    </style>